<template>
	<view class="app" style="padding-bottom: 100rpx;">
		<!-- 搜索 -->
		<!-- <view class="search">
			<u-search :showAction="flase"></u-search>
		</view> -->
		<!-- 关注 发现 -->
		<view class="select">
			<u-tabs :list="list1" :current="current" lineWidth="30" @change="changeindex" lineColor="#f56c6c"
				:activeStyle="{
		    color: '#f56c6c',
		    fontWeight: 'bold',
		    transform: 'scale(1.05)',
			fontsise:'28rpx'
		}" :inactiveStyle="{
		    color: '#606266',
		    transform: 'scale(1)'
		}" itemStyle="padding-left: 30rpx; padding-right: 30rpx; height: 68rpx;"></u-tabs>
		</view>
		<!-- 轮播图 -->
		<view class="slideshow" v-show=" current == 1 ">
			<u-swiper :list="list3" indicator indicatorMode="line" circular duration="1500"></u-swiper>
		</view>
		<!-- 间隔 -->
		<u-gap height="10rpx" bgColor="#F7F8FA" v-show="current == 1"></u-gap>
		<!-- 下拉 -->
		<view class="classify" v-show="current == 1" closed="selectHouse">
			<van-dropdown-menu>
				<van-dropdown-item :title="title1" @open="showPopup" overlay="false" />
				<van-dropdown-item :title="rent" :options="option2" @change="selectHouse2" @closed="closedMenu" />
				<van-dropdown-item :title="room" :options="option3" @change="selectHouse3" @closed="closedMenu" />
				<van-dropdown-item :title="type" :options="option4" @change="selectHouse4" @closed="closedMenu" />
			</van-dropdown-menu>
		</view>

		<!-- 房子盒子 -->
		<view class="house" v-for="h in house" :key="h.id" @click="clickHouse(h.id)" v-show="current == 1">
			<!-- 房子图片盒子 -->
			<view class="houseimg">
				<view class="imgtext">
					<u--text color="#ffffff" :text="h.scale" size="10"></u--text>
				</view>
				<!-- 图片 -->
				<van-image radius="15" width="100%" height="100%" :src="h.image">
				</van-image>
			</view>
			<!-- 房子文字盒子 -->
			<view class="housetext">
				<view style="padding-top: 30rpx;">
					<u--text bold size="35rpx" :text="h.introduce"></u--text>
				</view>
				<!-- 价格 -->
				<view style="display: inline-flex;padding-top: 20rpx;">
					<view class="money">
						<u--text color="#E51837" size="50rpx" :text="h.price"></u--text>
						<u--text color="#E51837" text=" 元/月"></u--text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 无限加载 -->
		<u-loadmore v-if="current == 1" :status="status" :load-text="loadText" />

		<!-- 关注 -->
		<view style="background-color: #F6F6F6; height: 100vh; width: 100vw; " v-show="current == 0">
			<view class="box">

			</view>
		</view>



		<!-- 地图 -->
		<view v-show="current == 2">
			<view class="page-body">
				<view class="page-section page-section-gap">
					<map :id="mapId" style="width: 100vw; height: 100vh;" @regionchange="$u.throttle(getHouseMark,1000)"
						:latitude="lat" :longitude="lng" :markers="covers" @markertap="mark" @callouttap="call">
					</map>
				</view>
			</view>
		</view>

		<!-- 下拉框区域选择 -->
		<van-popup :show="show" position="bottom" @click-overlay="closePopup" overlay="false"
			custom-style="height: 45%;" bind:close="onClose">
			<van-area @cancel="closePopup" @confirm="chooseThis($event.detail.values)" :area-list="areaList"
				:columns-placeholder="['请选择', '请选择', '全部']" />
		</van-popup>

		<tab-bar></tab-bar>
	</view>
</template>

<script>
	import slFilter from '@/components/sl-filter/sl-filter.vue';
	import {
		areaList
	} from '@vant/area-data';
	export default {
		components: {
			slFilter
		},
		data() {
			return {
				status: "loadmore",
				loadText: {
					loadmore: "轻轻上拉加载更多...",
					loading: "努力加载更多...",
					nomore: "没有更多了"
				},
				//上拉分页
				pageSize: "5", //每页放多少条
				pageNum: 1, //第几页				
				province: "",
				city: "",
				region: "",
				rent: "",
				areaList,
				show: false, //是否显示弹出层
				title2: "租金",
				list1: [{
					name: '关注'
				}, {
					name: '发现'
				}, {
					name: '地图'
				}],
				current: 1,
				list3: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				option2: [{
						text: '全部',
						value: '0',
						icon: ''
					}, {
						text: '1000元以下',
						value: '1',
						icon: ''
					},
					{
						text: '1000-1500元',
						value: '2',
						icon: ''
					},
					{
						text: '1000-1500元',
						value: '3',
						icon: ''
					},
					{
						text: '1500-2000元',
						value: '4',
						icon: ''
					},
					{
						text: '2000-2500元',
						value: '5',
						icon: ''
					},
					{
						text: '2500-3000元',
						value: '6',
						icon: ''
					},
					{
						text: '3000-4000元',
						value: '7',
						icon: ''
					},
					{
						text: '4000-5000元',
						value: '8',
						icon: ''
					},
					{
						text: '5000-6000元',
						value: '9',
						icon: ''
					},
					{
						text: '6000-8000元',
						value: '10',
						icon: ''
					},
					{
						text: '8000-15000元',
						value: '11',
						icon: ''
					},
					{
						text: '15000元以上',
						value: '12',
						icon: ''
					},
					{
						text: '15000元以上',
						value: '13',
						icon: ''
					},
				],
				option3: [{
						text: '全部',
						value: '0',
						icon: ''
					},
					{
						text: '一室',
						value: '1',
						icon: ''
					},
					{
						text: '二室',
						value: '2',
						icon: ''
					},
					{
						text: '三室',
						value: '3',
						icon: ''
					},
					{
						text: '四室',
						value: '4',
						icon: ''
					},
					{
						text: '五室及以上',
						value: '5',
						icon: ''
					},
				],
				option4: [{
						text: '全部',
						value: '0',
						icon: ''
					},
					{
						text: '整租',
						value: '1',
						icon: ''
					},
					{
						text: '合租',
						value: '2',
						icon: ''
					},
				],
				title1: "区域",
				rent: "租金",
				room: "房型",
				type: "类型",
				img: "",
				house: [],
				src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
				text: '无头像',
				swlatitude: "", //西南纬度
				swlongitude: "", //西南经度
				nelatitude: "", //东北纬度
				nelongitude: "", //东北经度
				mapId: 'myMap', // 地图组件的id，用于创建地图上下文对象
				lng: "",
				lat: "",
				id: 0, // w使用 marker点击事件 需要填写id
				title: 'map',
				covers: [{
					id: "1",
					joinCluster: "ture",
					latitude: 26.884861,
					longitude: 112.68206,
					callout: {
						content: "这里是1",
						display: "BYCLICK",
						color: "#blue",
						fontSize: "12",
						bgColor: "#F76425",
						borderRadius: "5",
						padding: '10',
					},
				}]
			};
		},
		onReachBottom() {
			this.status = 'loading';
			this.pageNum = this.pageNum + 1;
			setTimeout(() => {
				this.getHouse(this.sourceTip)
			}, 1000)
		},
		methods: {
			closePopup() {
				this.show = false
			},
			//控制popup组件的弹出和隐藏
			showPopup() {
				this.show = true
			},
			getHouse() {
				console.log(this.status)
				uni.showLoading({
					title: "数据加载中",
				})
				this.check()
				uni.request({
					url: this.websiteUrl + "TN-INDEX/house/select",
					data: {
						province: this.province,
						city: this.city,
						region: this.region,
						rent: this.rent,
						room: this.room,
						type: this.type,
						page: this.pageNum,
						size: this.pageSize
					},
					success: res => {
						this.house = this.house.concat(res.data)
						if (res.data.length < this.pageSize) {
							this.status = 'nomore'
						} else {
							this.status = 'loading'
						}
						console.log(this.pageSize)
						console.log(res.data.length)
						console.log(this.status)
					},
					complete: () => {
						uni.hideLoading()
					}
				})
			},
			clickHouse(id) {
				uni.navigateTo({
					url: "/pages/houseDetail/houseDetail?id=" + id
				})
			},
			changeindex(index) {
				let f = this.current
				this.current = index.index;
				console.log(this.current)
				if (this.current == 2) {
					this.test()
				}
			},
			test() {
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy: 'ture',
					highAccuracyExpireTime: '6000',
					success: res => {
						// console.log('当前位置的经度：' + res.longitude);
						// console.log('当前位置的纬度：' + res.latitude);
						this.lng = res.longitude
						this.lat = res.latitude
					}
				});

			},
			test1() {
				const mapContext = uni.createMapContext(this.mapId, this);
				// 这里的mapContext就是地图上下文对象，可以调用地图相关的方法
				mapContext.getRegion({
					success: res => {
						this.swlatitude = res.southwest.latitude,
							this.swlongitude = res.southwest.longitude,
							this.nelatitude = res.northeast.latitude,
							this.nelongitude = res.northeast.longitude,
							console.log(this.swlatitude)
						console.log(this.swlongitude)
						console.log(this.nelatitude)
						console.log(this.nelongitude)
					}
				});
			},
			getHouseMark() {
				this.test1()
				uni.request({
					url: this.websiteUrl + "TN-INDEX/house/getHouse",
					method: 'get',
					data: {
						swlatitude: this.swlatitude,
						swlongitude: this.swlongitude,
						nelatitude: this.nelatitude,
						nelongitude: this.nelongitude,
					},
					success: res => {
						let a = res.data.data
						let tmp = [];
						console.log(a)
						a.forEach(var1 => {
							let geo = {
								joinCluster: "ture",
								id: var1.id,
								latitude: var1.lat,
								longitude: var1.lng,
								callout: {
									content: var1.introduce,
									display: "BYCLICK",
									color: "#blue",
									fontSize: "12",
									bgColor: "#F76425",
									borderRadius: "5",
									padding: '10',
								},
							}
							tmp.push(geo);
						})
						this.covers = tmp
						console.log(this.covers)
					}
				})
			},
			mark(e) {
				console.log("mark", e.detail.markerId)
			},
			call(e) {
				console.log("call", e.detail.markerId)
				uni.navigateTo({
					url: "/pages/houseDetail/houseDetail?id=" + e.detail.markerId
				})
			},
			selectHouse2(i) {
				this.rent = this.option2[i.detail].text
				this.pageNum = 0
				this.house = []
			},
			selectHouse3(i) {
				this.room = this.option3[i.detail].text
				this.pageNum = 0
				this.house = []
			},
			selectHouse4(i) {
				this.type = this.option4[i.detail].text
				this.pageNum = 0
				this.house = []
			},
			closedMenu() {
				this.house = []
				this.getHouse()
			},
			//选好地址后点击确定
			chooseThis(i) {
				this.house = []
				this.province = i[0].name
				this.city = i[1].name
				this.region = i[2].name
				if (this.province == "") {

				}
				this.closePopup()
				this.getHouse()
			},
			check(){
				if(this.province == ""){
					this.province = "湖南省"
				}
				if(this.city == ""){
					this.city = "衡阳市"
				}
				if(this.region == ""){
					this.region = "全部"
				}
				if(this.rent == "租金"){
					this.rent = "全部"
				}
				if(this.room == "房型"){
					this.room = "全部"
				}
				if(this.type == "类型"){
					this.type = "全部"
				}
			}
		},
		onLoad() {
			uni.hideTabBar()
			this.getHouse()
		}
	}
</script>

<style lang="scss">
	.app {}

	.search {
		display: block;
		margin: auto;
		text-align: center;
		width: 92%;
	}

	.slideshow {
		display: block;
		margin: auto;
		margin-top: 10rpx;
		text-align: center;
		width: 80%;
	}

	.select {
		display: flex;
		justify-content: center;

		.u-tabs__wrapper__nav__item__text.data-v-48634e29 {
			font-size: 36rpx;
		}
	}

	.house {
		display: flex;
		align-items: center;
		width: 100%;
		height: 240rpx;
	}

	.houseimg {
		border-radius: 40rpx;
		position: relative;
		margin-left: 25rpx;
		width: 260rpx;
		height: 200rpx;
		box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;
	}

	.money {
		display: inherit;
	}

	.housetext {
		margin-left: 10rpx;
		width: 400rpx;
		height: 240rpx;
	}

	.imgtext {
		border-radius: 20rpx;
		padding: 10rpx;
		z-index: 1;
		background-color: rgba(2, 2, 2, 0.2);
		position: absolute;
		top: 80%;
		right: 5%;
		transform: translate(-0, -50%);
	}

	.box {
		margin: 20rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		width: 95%;
		height: 300rpx;
		box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
	}
</style>